<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <h3 class="panel-title">员工工作负荷统计</h3>
    </div>
    <div class="panel-body">
        <!-- 负荷统计概览 -->
        <div class="row">
            <div class="col-md-4">
                <div class="info-box bg-green">
                    <span class="info-box-icon"><i class="fa fa-check-circle"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">正常负荷</span>
                        <span class="info-box-number">{$normalCount}</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: {($normalCount / ($normalCount + $highCount + $overloadCount) * 100)|round}%"></div>
                        </div>
                        <span class="progress-description">
                            完成率 ≥ 80%
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="info-box bg-yellow">
                    <span class="info-box-icon"><i class="fa fa-exclamation-triangle"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">高负荷</span>
                        <span class="info-box-number">{$highCount}</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: {($highCount / ($normalCount + $highCount + $overloadCount) * 100)|round}%"></div>
                        </div>
                        <span class="progress-description">
                            完成率 60-80%
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="info-box bg-red">
                    <span class="info-box-icon"><i class="fa fa-times-circle"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">超负荷</span>
                        <span class="info-box-number">{$overloadCount}</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: {($overloadCount / ($normalCount + $highCount + $overloadCount) * 100)|round}%"></div>
                        </div>
                        <span class="progress-description">
                            完成率 < 60%
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 详细负荷列表 -->
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">员工工作负荷详情</h3>
                    </div>
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>员工姓名</th>
                                        <th>用户名</th>
                                        <th>总分配数量</th>
                                        <th>已完成数量</th>
                                        <th>待完成数量</th>
                                        <th>完成率</th>
                                        <th>负荷状态</th>
                                        <th>最后报工时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $workloadList as $workload}
                                    <tr>
                                        <td>{$workload.nickname|default='未知'}</td>
                                        <td>{$workload.username|default='未知'}</td>
                                        <td>{$workload.total_allocations}</td>
                                        <td>{$workload.completed_allocations}</td>
                                        <td>{$workload.pending_allocations}</td>
                                        <td>
                                            <div class="progress progress-sm">
                                                <div class="progress-bar {if $workload.workload_rate >= 80}progress-bar-success{elseif $workload.workload_rate >= 60}progress-bar-warning{else}progress-bar-danger{/if}" 
                                                     style="width: {$workload.workload_rate}%">
                                                    {$workload.workload_rate}%
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            {if $workload.workload_rate >= 80}
                                                <span class="label label-success">正常</span>
                                            {elseif $workload.workload_rate >= 60}
                                                <span class="label label-warning">高负荷</span>
                                            {else}
                                                <span class="label label-danger">超负荷</span>
                                            {/if}
                                        </td>
                                        <td>
                                            {if $workload.last_report_time}
                                                {$workload.last_report_time|date='Y-m-d H:i:s'}
                                            {else}
                                                <span class="text-muted">无记录</span>
                                            {/if}
                                        </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 负荷分布图表 -->
        <div class="row">
            <div class="col-md-6">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">负荷分布饼图</h3>
                    </div>
                    <div class="box-body">
                        <canvas id="workloadChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">负荷趋势</h3>
                    </div>
                    <div class="box-body">
                        <div class="alert alert-info">
                            <h4><i class="fa fa-info"></i> 负荷分析</h4>
                            <ul>
                                <li>正常负荷员工：{$normalCount} 人，建议保持当前工作节奏</li>
                                <li>高负荷员工：{$highCount} 人，建议适当减少新任务分配</li>
                                <li>超负荷员工：{$overloadCount} 人，建议立即调整工作安排</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 绘制负荷分布饼图
    var ctx = document.getElementById('workloadChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['正常负荷', '高负荷', '超负荷'],
            datasets: [{
                data: [{$normalCount}, {$highCount}, {$overloadCount}],
                backgroundColor: [
                    '#00a65a',
                    '#f39c12',
                    '#dd4b39'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
});
</script>
